<template>
  <div class="video-info">
    <page-header :model="model" :isVideo="true"></page-header>
    <div class="img-show">
      <img :src="video.img" alt="" style="width:100%;">
      <i class="iconfont icon-video_horizontal_outlined"></i>
    </div>
    <div class="v-info">
      <div class="v-openapp">
        <a href="#">打开App，流畅又高清</a>
      </div>
      <div class="v-detail">
        <div class="v-title">
          <span><i class="iconfont icon-fire"></i>热门</span>
          <p>{{video.title}}</p>
        </div>
        <div class="v-num">
          <div class="v-up">
            <i class="iconfont icon-UPzhu"></i>
            <span>破羽残蝶</span>
          </div>
          <span>{{video.playNum | toWan}}播放</span>
          <span>{{video.danmu | toWan}}弹幕</span>
          <span>09-15</span>
        </div>
        <div class="v-operations">
          <div class="v-oper-left">
            <div>
              <i class="iconfont icon-dianzan"></i>
              <span>点赞</span>
            </div>
            <div>
              <i class="iconfont icon-star"></i>
              <span>收藏</span>
            </div>
            <div>
              <i class="iconfont icon-Downloadfolder"></i>
              <span>缓存</span>
            </div>
          </div>
          <div class="v-oper-right">
            <i class="iconfont icon-qingxidu"></i>
            <span>清晰度</span>
          </div>
        </div>
      </div>
    </div>
    <div class="v-swipe">
      <div class="v-nav-bar">
        <div class="v-nav-item" :class="{active: activeIndex === 0}" @click="skipToFirst">相关推荐</div>
        <div class="v-nav-item" :class="{active: activeIndex === 1}" @click="skipToSecond">评论2279</div>
      </div>
      <van-swipe ref="swiper" class="my-swipe" indicator-color="white" @change="onSwipeChange">
        <van-swipe-item class="first-swipe-item">
          <video-card-box :videos="relatedVideos"></video-card-box>
        </van-swipe-item>
        <van-swipe-item>222</van-swipe-item>
      </van-swipe>
    </div>
    <div class="copyright">
      <p>信息网络传播视听节目许可证：0910417</p>
      <p>网络文化经营许可证 沪网文【2019】3804-274号</p>
      <p>广播电视节目制作经营许可证：（沪）字第01248号</p>
      <p>增值电信业务经营许可证 沪B2-20100043</p>
    </div>
  </div>
</template>

<script>
import VideoCardBox from '../components/common/VideoCardBox.vue'
import PageHeader from '../components/common/PageHeader.vue'
export default {
  filters: {
    toWan (val) {
      return val >= 10000 ? val / 10000 + '万' : val + ''
    }
  },
  props: ['id'],
  components: {
    PageHeader, VideoCardBox
  },
  data () {
    return {
      model: [],
      video: {},
      activeIndex: 0,
      relatedVideos: []
    }
  },
  watch: {
    id: function(val) {
      this.fetchVideo()
      this.fetchRelatedVideo()
      this.backtop()
    }
  },
  methods: {
    async fetchUser () {
      const res = await this.$http.get('/user')
      this.model = res.data
    },
    async fetchVideo () {
      const res = await this.$http.get(`/video/${this.id}`)
      this.video = res.data
    },
    async fetchRelatedVideo () {
      const res = await this.$http.get(`/video/related/${this.id}`)
      this.relatedVideos = res.data
    },
    skipToFirst () {
      this.activeIndex = 0
      this.$refs.swiper.swipeTo(0)
    },
    skipToSecond () {
      this.activeIndex = 1
      this.$refs.swiper.swipeTo(1)
    },
    onSwipeChange (index) {
      this.activeIndex = index
    },
    backtop () {
      const timer = setInterval(function() {
        const osTop = document.documentElement.scrollTop || document.body.scrollTop
        const ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    }
  },
  created () {
    this.fetchUser()
    this.fetchVideo()
    this.fetchRelatedVideo()
  }
}
</script>

<style lang="scss">
.video-info {
  color: #505050;
  background-color: #fff;
  .img-show {
    position: relative;
    .icon-video_horizontal_outlined {
      font-size: 60px;
      color: #ccc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .v-info {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-bottom: 2px solid #fcfcfc;
    .v-openapp {
      width: 100%;
      text-align: center;
      box-sizing: border-box;
      a {
        display: inline-block;
        height: 34.5px;
        line-height: 34.5px;
        font-size: 13px;
        color: #fff;
        width: 100%;
        background-color: #fb7299;
        border-radius: 17.25px;
      }
    }
    .v-title {
      display: flex;
      margin-top: 10px;
      span {
        white-space: nowrap;
        align-items: center;
        font-size: 12px;
        color: #fb7299;
        display: inline-block;
        padding: 2px 5px;
        height: 16px;
        width: 40px;
        line-height: 16px;
        background-color: #f4f4f4;
        border-radius: 8px;
        position: relative;
        top: 1px;
        margin-right: 5px;
        .iconfont {
          font-size: 8px;
          padding-right: 2px;
        }
      }
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .v-num {
      margin-top: 10px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      .v-up {
        color: #212121;
        span {
          position: relative;
          bottom: 1.5px;
          padding-left: 3px;
        }
        padding-right: 20px;
      }
      span {
        padding-right: 10px;
      }
    }
    .v-operations {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      color: #999;
      font-size: 12px;
      .v-oper-left {
        display: flex;
        div {
          padding-right: 15px;
          .iconfont {
            font-size: 18px;
            padding-right: 3px;
          }
        }
      }
      .v-oper-right {
        position: relative;
        top: 4px;
        .iconfont {
          font-size: 14px;
          padding-right: 4px;
        }
      }
    }
  }
  .v-swipe {
    margin-top: 10px;
    .v-nav-bar {
      display: flex;
      justify-content: space-around;
      .v-nav-item {
        font-size: 14px;
        padding-bottom: 5px;
        border-bottom: 2px solid transparent;
        &.active {
          color: #fb7299;
          border-bottom: 2px solid #fb7299;
        }
      }
    }
  }
  .my-swipe {
    width: 100%;
    .first-swipe-item {
      box-sizing: border-box;
      padding: 0 10px;
    }
  }
  .copyright {
    padding-top: 20px;
    background-color: #f4f4f4;
    margin: 15px 0;
    text-align: center;
    p {
      color: #999;
      font-size: 12px;
      line-height: 24px;
    }
  }
}
</style>
